<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<base href="<%=basePath%>">
<html lang="zn-cn">
<head>
<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>费率查询</title>
	<link rel="stylesheet" href="css/rate.css">
	
</head>
<body class="f6 ova">
	<div class="wrap2 "  style="visibility:hidden">
		<div class="top_part">
			<h2 class="toptitle">
				<p class='top_left'>
					车辆种类：
					<span></span>
				</p>
				<p class='top_right'>
					车型：
					<span></span>
				</p>
			</h2>
			<div class="moneybox">
				<p>
					<span class="normalFare"></span>
					元 <i>标准</i>
				</p>
				<h2 class="over_weight" style="display:none">
					超重费用：
					<span></span> <i>元</i>
				</h2>
				<div class="discount_fare">
					<p>
						<span class="debitAmtDiscnt"></span>
						元
						<i>记账卡</i> <b>赣通卡支付</b>
					</p>
					<p>
						<span class="storedAmtDiscnt"></span>
						元
						<i>储蓄卡</i>
					</p>
				</div>

			</div>
		</div>
		<div class="middle_part">
			<div class="in_box por">
				<div class="line_a line"></div>
				<a>
					<span>
						●
						<i class="iconfont icon-left_arr"></i>
					</span>
					入口
				</a>
				<p class="startSta"></p>
			</div>
			<div class="hide_box por">
				<p class="hide_subscript por">
					<span>●</span>
					途径站点
					<b>站</b>
					<i class="hide_arr"></i>
					<b class="line line_c"></b>
				</p>
				<div class="hide_path"  style="display:none">
				
				</div>
			</div>
			<div class="out_box por">
				<div class="line_b line"></div>
				<a>
					<span>
						●
						<i class="iconfont icon-right-arr"></i>
					</span>
					出口
				</a>
				<p class="endSta"></p>

			</div>

		</div>
	</div>
	<div class="toast toast_timeout" style="display:none">网络异常，请稍后重试！</div>
	<div class="toast toast_error" style="display:none">信息输入有误</div>
	<div class="loading" style="display:none">
		<img src="img/loading.gif"></div>
	<div class="nodata" style="display:none">
		<img src="img/nodata.png">
		<h3>查不到相关信息</h3>
		<p>多出去走走,记得出行用ETC</p>
	</div>
	
<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/base.js"></script>
	<script type="text/javascript" src="js/data.js"></script>
	<script type="text/javascript" src="js/handle.js"></script>
	<script type="text/javascript">
		var fromStationNo = sessionStorage.getItem("fromStationNo");
			toStationNo = sessionStorage.getItem("toStationNo"),
			vehicleClass = sessionStorage.getItem("vehicleClass"),
			vehicleType = sessionStorage.getItem("vehicleType"),
			weight = sessionStorage.getItem("weight"),
			fromStationName = sessionStorage.getItem("fromStationName"),
			toStationName = sessionStorage.getItem("toStationName");
		function getResult() {
			var data = {
				fromStationNo: fromStationNo,
				toStationNo: toStationNo,
				vehicleClass: vehicleClass,
				vehicleType: vehicleType
			};

			//车型为货车时传重量
			if(vehicleClass == 1) {
				data.weight = weight;
			}

			$(".loading").show();
			console.log(data);
			$.ajax({
				url: "<%=basePath%>" + 'infoQuery/rateQuery',
				type: 'GET',
				dataType: 'json',
				data: data,
				timeout: 20000,
				cache: false,
				success: function (r) {
					console.log(r)
					if(r.responseCode != "00"){
						errorToast("查询失败",5);
						return false;
					}

					var pathInfo = r.rateInfo[0].pathInfo.split("^");
					var normalFare = (+r.rateInfo[0].normalFare/100).toFixed(2),
					    overFare = (+r.rateInfo[0].overFare/100).toFixed(2),
					    debitAmtDiscnt = (+r.rateInfo[0].debitAmtDiscnt/100).toFixed(2),
					    storedAmtDiscnt = (+r.rateInfo[0].storedAmtDiscnt/100).toFixed(2),
					    mileage = (+r.rateInfo[0].mileAge/1000).toFixed(2),
					    expectedTime = r.rateInfo[0].expectedTime;
					var outText = "<span>里程"+ mileage +"km&nbsp&nbsp&nbsp预计耗时"+expectedTime+"h</span>";
					$(".loading").hide();
					console.log(r);
					console.log(pathInfo)

					for (var i = 1; i <= pathInfo.length - 2; i++) {
						var text = "<p><span>●</span><i>"+ pathInfo[i] +"</i><b class='line line_c'></b></p>"
						if (i == pathInfo.length) {
							var text = "<p><span>●</span><i>"+ pathInfo[i] +"</i></p>"
						}
						$(".hide_path").append(text);
					};

					$(".hide_path p").last().find('b').height(15)

					$(".hide_subscript b").eq(0).html(pathInfo.length-2 + "站");
					$(".startSta").html(pathInfo[0]);
					$(".endSta").html(pathInfo[pathInfo.length-1]);
					$(".out_box").append(outText);
					if (vehicleClass==1) {
						// 货车
						$(".over_weight").show().find('span').html(overFare);
					}
					$(".normalFare").html(normalFare);
					$(".debitAmtDiscnt").html(debitAmtDiscnt);
					$(".storedAmtDiscnt").html(storedAmtDiscnt);

					var discount_fareWidth = debitAmtDiscnt.length > 7 || document.documentElement.clientWidth < 350 ? "100%" : "50%";			
					$(".discount_fare p").width(discount_fareWidth);	
			
					var pathHeigth = $(".hide_path p").length * parseInt($(".hide_path p").css('line-height')),
						scrHeight = $(window).height(),
						topBox = $(".top_part"),
						inBox = $(".in_box"),
						outBox = $(".out_box");

					var pathMaxHeigth = scrHeight - topBox.height() - inBox.height() - outBox.height() - $(".hide_subscript").height() - 40;
					if(pathHeigth > pathMaxHeigth) {
						$(".wrap2").on('scroll',scrollHandler);
					}

					//显示主界面	
					$('.wrap2').css("visibility","visible");				
				},
				error: function (e) {
					console.log(e)
					$(".loading").hide();
					$(".nodata").show();
				}
			});

			function scrollHandler(e){
				var sTop = $(this).scrollTop();
				var hideBoxHeigth = $(".hide_box").height();
				var scrHeight = $(window).height();
				var topBoxHeight = $(".top_part").height();
				var middleBoxHeight = $(".middle_part").height();

				if (middleBoxHeight <= scrHeight - topBoxHeight) {
					return false;
				}
			
				if (sTop <= topBoxHeight) {
					e.preventDefault();
					$(".hide_path").removeClass('ova').addClass('ovv');
					return false;
				}		

				$(".hide_path").removeClass('ovv').addClass('ova');
			}
			
		}
		$(function() {
			if(vehicleClass == 0){
				$('.top_left span').html("客车");
			}else {
				$('.top_left span').html("货车");
			}

			$(".top_right span").html(vehicleTypeArr[vehicleType]);
			$(".hide_subscript").on('click', function(e) {
				$('.hide_path').slideToggle(200, function(e) {
					var arr = $(".hide_arr");
					arr.hasClass('hide_arr_vertical') ? arr.removeClass('hide_arr_vertical') : arr.addClass('hide_arr_vertical');

				});
			});


			var pathMaxHeigth2 = $(window).height() - $(".in_box").height() - $(".out_box").height() - $(".hide_subscript").height() - 30
			$(".hide_path").css("max-height",pathMaxHeigth2).addClass('ovv');
			
			//获取费率结果的入口
			getResult();

		})
	</script>
	
</body>
</html>